<!--头-->
<style scoped>
  .slotCustomM {
    float: left;
    width: 8.75rem;
    height: 2.2rem;
    text-align: center;
    line-height: 2.2rem;
    font-size: .9rem;
    color: #fff;
    margin-left: 2.5rem;
  }

  .slotCustomR {
    float: right;
    height: 2.2rem;
    line-height: 2.2rem;
    text-align: left;
    font-size: .8rem;
    -webkit-transform: rotateY(180deg);
  }

  .icon-phone {
    font-size: 1rem;
  }
</style>

<style scoped>
  .main {
    padding-top: 2.2rem;
    font-size: .75rem;
  }

  .item {
    padding: 0 .75rem;
    line-height: 2rem;
  }

  .boldLine {
    height: .25rem;
    width: 100%;
    background-color: #f0f0f0;
  }

  .fineLine {
    height: 1px;
    width: 100%;
    background-color: #f0f0f0;
  }

  .icon-gongsi-copy, .icon-yue01 {
    font-size: .9rem;
  }

  .icon-weixinzhifu {
    font-size: 1.05rem;
    color: rgb(30, 199, 35);
  }

  .icon-zhifubaozhifu {
    font-size: 1.05rem;
    color: rgb(27, 162, 230);
  }

  .icon-wancheng {
    font-size: 1rem;
    color: #f0f0f0;
  }

  .switch {
    margin-top: .475rem;
  }

  .itemPay {
    padding: 0 .5rem;
  }

  .itemAllow {
    padding-right: .5rem;
  }
  .allowPay {
    color: #ccc;
    padding-right: .5rem;
  }
  .surplus {
    background-color: #efefef;
    padding: .5rem .75rem;
  }
  .checked {
    color: #0094db;
  }
  .footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 2.5rem;
    line-height: 2.5rem;
    color: #fff;
    text-align: center;
    background-color: #cccccc;
  }
  .footerActive {
    background-color: #0094db;
  }
</style>

<!--输入密码-->
<style scoped>
  .payBox {
    font-size: .75rem;
    line-height: 2.5rem;
    padding-bottom: 5rem;
  }

  .payBack {
    width: 2.5rem;
    text-align: center;
  }

  .payTitle {
    width: 73.33%;
    text-align: center;
  }

  .icon-llmainpageback {
    font-size: 9rem;
  }

  .pwdBox {
    border: 1px solid #ccc;
    width: 80%;
    margin: auto;
  }

  .forgetPwd {
    color: #0094db;
    text-align: center;
    width: 5rem;
    height: 2.5rem;
    line-height: 2.5rem;
    display: none;

  }

  .payLine {
    background-color: #cccccc;
    width: .075rem;
    margin: .75rem 0;
    height: 1rem;
  }

  .payBtn {
    width: 3rem;
    text-align: center;
    color: #f0f0f0;
  }

  .password {
    width: 10rem;
    padding-left: .45rem;
  }

  input[type=password] {
    /*line-height: 2.5rem;*/
    font-size: .9rem;
    border: none;
  }

  .payBtnActive {
    color: #0094db;
  }

  .paying {
    text-align: center;
  }
</style>

<!--不能使用公司支付违规信息弹窗展示-->
<style scoped>
  .alertNotComPay {
    font-size: .75rem;
    width: 86.67%;
    padding: .5rem;
  }
  .alertLi {
    display: flex;
    box-sizing: border-box;
    padding: .5rem;
  }
  .alertLi > span {
    padding-right: .5rem;
  }
  .alertLi > span:nth-of-type(1) {
    padding-right: 0;
  }
  .alertLi > span:last-of-type {
    padding-right: 0;
    /*max-width: 11.75rem;*/
  }
  .alertNotComPayT {
    text-align: center;
  }

</style>
<template>
  <div class="pay">
    <headNav @headCustomBack="headBack">
      <div class="slotCustomM">收银台</div>
      <div class="slotCustomR">
        <a href="tel:400-010-5050"><i class="iconfont icon-phone"></i></a>
      </div>
    </headNav>
    <div class="main">
      <div class="boldLine"></div>
      <div class="fix item">
        <div class="l">
          应支付:
        </div>
        <div class="r">
          <span class="money">{{totalAmount}}</span>元
        </div>
      </div>
      <div class="boldLine"></div>
      <div class="item fix" v-if="canShowCompanPay">
        <div class="l"><i class="iconfont icon-gongsi-copy"></i></div>
        <div class="l itemPay">公司支付</div>
        <div class="l itemAllow" v-if="companyMoneyShow">
          <span class="allowPay">允许支付</span><span class="money">{{bpTotalAmount}}</span>元
        </div>
        <div class="l" v-if="!companyPayNotNeedAuth">需审批</div>
        <!--<div class="l" v-if="!canCompanyPay">不能使用公司支付</div>-->
        <div class="r switch">
          <switchBtn :value="companySwitch" @toggle=companyToggle></switchBtn>
        </div>
      </div>
      <div class="fineLine"></div>
      <div class="item fix">
        <div class="l"><i class="iconfont icon-yue01"></i></div>
        <div class="l itemPay">我的余额</div>
        <div class="l itemAllow"><span class="allowPay">可用余额</span><span class="money">{{personalBalance}}</span>元</div>
        <div class="r switch">
          <switchBtn :value="balanceSwitch" @toggle=balanceToggle></switchBtn>
        </div>
      </div>
      <div class="surplus">
        还需支付<span class="money">{{thirdPartyMoney}}</span>元, 请选择
      </div>
      <div class="item fix" @click="weiXinClick" v-if="weiXinShow">
        <div class="l"><i class="iconfont icon-weixinzhifu"></i></div>
        <div class="l itemPay">微信</div>
        <div class="r"><i class="iconfont icon-wancheng" :class="{checked:weiXinChecked}"></i></div>
      </div>
      <div class="item fix" @click="zhiFuBaoClick" v-if="zhiFuBaoShow">
        <div class="l"><i class="iconfont icon-zhifubaozhifu"></i></div>
        <div class="l itemPay">支付宝</div>
        <div class="r"><i class="iconfont icon-wancheng" :class="{checked:zhiFuBaoChecked}"></i></div>
      </div>
      <div class="footer" @click="immediatelyPay" :class="{footerActive:canPay}">立即支付</div>
    </div>

    <pop v-show="passwordPopShow" @popClick="passwordPopClick">
      <div class="payBox">
        <div class=" fix">
          <div class="l payBack" @click="passwordPopShow=false"><i class="iconfont icon-llmainpageback"></i></div>
          <div class="l payTitle">为了您的账户安全,请校验登录密码</div>
        </div>
        <div v-show="!payingShow">
          <div class="fix pwdBox">
            <div class="l"><input type="password" v-model="password" class="password" @input="pwdChange($event)"/></div>
            <div class="payBtn r" :class="payBtnActive" @click="payBtnClick">付款</div>
            <div class="payLine r"></div>
          </div>
          <div class="forgetPwd r">
            忘记密码?
          </div>
        </div>
        <div v-show="payingShow" class="paying">正在支付....</div>
      </div>
    </pop>
    <!--密码错误修改-->
    <confirm :confirmInfo="confirmInfo" :confirmInfoL="confirmInfoL" :confirmInfoR="confirmInfoR"
             @confirmBtnL="confirmBtnL" @confirmBtnR="confirmBtnR" v-show="confirmShow"></confirm>
    <confirmOne @confirmOneBtn="confirmOneBtn" :confirmOneInfo="confirmOneInfo" v-show="confirmOneShow"
                :confirmOneBtnName="confirmOneBtnName"></confirmOne>
    <toast :toastInfo="toastInfo" v-show="toastShow"></toast>
    <alertWindow v-show="alertNotComPayShow" @alert="alertNotComPayClick">
      <div class="alertNotComPay">
        <div class="alertNotComPayT">不能使用公司支付</div>
        <ul>
          <li v-for="(item,index) in rejectMessageArray" class="alertLi fix">
            <span>{{index+1}} 、</span>
            <!--<span v-if="item.orderNo != undefine">{{item.orderNo}}</span>-->
            <span v-if="item.userName != undefine">{{item.userName}}</span>
            <span class="ell">{{item.rejectMessage}}</span>
          <li/>
        </ul>
      </div>
    </alertWindow>
  </div>


</template>


<script>
  import {Indicator} from 'mint-ui'
  import headNav from './headNavCustom.vue'
  import switchBtn from './switch.vue'
  import pop from './pop.vue'
  import confirm from "./confirm.vue"
  import confirmOne from "./confirmOne.vue"
  import toast from "./toast.vue"
  import alertWindow from "./alert.vue"
  import pingpp from '../libs/pingpp'
  export default{
    components: {headNav, switchBtn, pop, confirmOne, confirm, toast, alertWindow},
    data(){
      return {
        enOrderPrice: '',//加密信息,包含订单与价格信息
        canPay: false,
        toastInfo: '',
        toastShow: false,
        confirmOneInfo: '',
        confirmOneShow: false,
        confirmShow: false,
        confirmInfo: '密码输入错误',
        confirmInfoL: '重新输入',
        confirmInfoR: '找回密码',
        payingShow: false, //正在支付
        payBtnActive: '',
        password: '',//密码
        passwordPopShow: false,
        canShowCompanPay: false, // 是否可以显示公司支付
        canCompanyPay: true, // 是否可以用公司支付
        companyPayNotNeedAuth: false,//需要审批
        companyBalanceEnough: true,
        companyMoneyShow: false,
        zhiFuBaoShow: false,
        weiXinShow: false,
        weiXinChecked: false,
        zhiFuBaoChecked: false,
        companySwitch: false,
        balanceSwitch: false,
        personalBalance: 0,//我的余额
        totalAmount: 0,//订单总价
        bpTotalAmount: 0,//支持企业支付的余额
        amount: 0,//计算后的个人第三方需支付的钱
        tradeId: '',//混合支付返回id  传给pxx  id
        rejectMessageArray: [],
        alertNotComPayShow: false,
        mixedPayCode: '',
        confirmOneBtnName: '确认',
        initDate:{}
      }
    },
    props: {},
    mounted(){
      var that = this;
      var ua = window.navigator.userAgent.toLowerCase();
      if (ua.match(/MicroMessenger/i) == 'micromessenger') {//在微信中哦
//        alert('在微信中哦');
        this.zhiFuBaoShow = true;
        this.weiXinShow = true;
      } else {
        this.zhiFuBaoShow = true;
        this.weiXinShow = false;
//        alert('不在微信中哦');
      }
      this.init();

    },
    methods: {
      init(){
        Indicator.open({
          text: '加载中...',
          spinnerType: 'fading-circle'
        });
        var that = this;
        var serverUrl = $tool.getServerUrl();
        app.ajax({
          type: 'get',
          url: serverUrl + '/pay/status.json',//多个订单用逗号拼接
          data: {
            orderNos: that.$store.state.orderId
          },
          dataType: 'jsonp',
        }).done(function (res) {
          that.initDate = res;

          that.canShowCompanPay = res.paymentInfoDto.canShowCompanPay;//先判断能否显示公司支付
          that.canCompanyPay = res.paymentInfoDto.canCompanyPay;//先判断能否用公司支付

          if (res.paymentInfoDto.canCompanyPay == false) { //不能用公司支付,获取不能支付详情信息
            that.rejectMessageArray = res.paymentInfoDto.orderCompanyPayRejectInfo;
          }


          that.personalBalance = parseFloat(res.paymentInfoDto.personalBalance);
          that.totalAmount = parseFloat(res.paymentInfoDto.totalAmount);
          that.bpTotalAmount = parseFloat(res.paymentInfoDto.bpTotalAmount);

          that.companyBalanceEnough = res.paymentInfoDto.companyBalanceEnough;//公司余额是否充足


          if (that.totalAmount > that.bpTotalAmount) {//总价大于公司可用余额
            that.companyMoneyShow = true; //公司可用余额展示
          }
          if (res.paymentInfoDto.companyPayNotNeedAuth == true) {//公司支付不需要审批
            that.companyPayNotNeedAuth = true;
          }else{
            that.companyPayNotNeedAuth = false;
          }
          that.enOrderPrice = res.enOrderPrice;
          Indicator.close();
        }).fail(function (res) {
          console.log('error');
          Indicator.close();
        });


      },
      alertNotComPayClick(){
        this.alertNotComPayShow = false;
      },
      immediatelyPay(){

        if (this.canPay == false) {
          return
        }
        if (!this.companySwitch && !this.balanceSwitch && !this.weiXinChecked && !this.zhiFuBaoChecked) {
          this.toast('请选择支付方式')
        } else if (this.companySwitch == false && this.balanceSwitch == false) {
          this.password = '';
          this.mixedPay();
        }
        else {
          this.passwordPopShow = true;
          setTimeout(function () {
            this.toastShow = false;
            // 获取焦点
            var pwdInput = document.querySelector('.password');
            pwdInput.focus();
          }, 1000)
        }

      },//立即支付按钮
      confirmOneBtn(){
        this.confirmOneShow = false;
        if (this.mixedPayCode == '99') {
          this.seeOrder();
        }
      },
      payBtnClick(){
        var that = this;
        if (that.password.length < 6) {  //登录密码
          that.toast('密码长度不对');
        } else {
          that.payingShow = true;  //正在支付
          that.mixedPay();
        }

      },//    付款按钮
      mixedPay(){
        Indicator.open({
          text: '加载中...',
          spinnerType: 'fading-circle'
        });
        var that = this;
        that.$platform.pay({
          password: that.password,
          availableAuth: false,//先写死
          enOrderPrice: that.enOrderPrice,
          balancePay: that.balanceSwitch,
          companyPay: that.companySwitch,
        },function (res) {
          that.passwordPopShow = false;
          that.payingShow = false;  //正在支付
          that.mixedPayCode = res.state;
          switch (res.state) {
            case '0':
              that.getResultAjax(res.planId);
              break;
            case '1':
              that.confirmOneInfo = res.message;
              that.confirmOneShow = true;
              break;
            case '2':
              that.confirmOneInfo = res.message;
              that.confirmOneShow = true;
              break;
            case '99':
              that.getResultAjax(res.planId, res.message);
              break;
            case '100':
              that.amount = res.cashPayPrice;
              that.tradeId = res.tradeId;
              that.pxxPay();
              break;
          }
          Indicator.close();
        },function () {
          Indicator.close();
        });
      },//混合支付接口
      pxxPay(){//第三方支付接口
        var that = this;
        var channel;
        if (this.weiXinChecked) {
          channel = 'wx_pub'
        }
        if (this.zhiFuBaoChecked) {
          channel = 'alipay_wap'
        }

        Indicator.open({
          text: '加载中...',
          spinnerType: 'fading-circle'
        });
        var serverUrl = $tool.getServerUrl();
        app.ajax({
          type: 'get',
          url: serverUrl + '/pay/pxxPay.json',
          dataType: 'jsonp',
          jsonpCallback: 'callback',
          data: {
            orderId: that.tradeId,
            amount: that.amount,
            channel: channel,
          },
        }).done(function (res) {
          Indicator.close();
          console.log(res);
          pingpp.createPayment(res, function (result, err) {
            if (result == "success") {

              that.getResultAjax(that.tradeId);

            } else if (result == "fail") {

            } else if (result == "cancel") {

            }

          });

        }).fail(function (res) {
          Indicator.close();
        });
      },
      getResultAjax(planId, people){
        Indicator.open({
          text: '加载中...',
          spinnerType: 'fading-circle'
        });
        var that = this;
        var serverUrl = $tool.getServerUrl();
        app.ajax({
          type: 'get',
          url: serverUrl + '/pay/getResult.json',
          data: {
            planId: planId,
            authPeople: people
          },
          dataType: 'jsonp',
          jsonp: 'callback',
        }).done(function (res) {
          that.mixedPayCode = res.state;
          switch (res.state) {
            case '99':
              that.$router.push({
                name: 'paySuccess',
                params: {
                  res: res
                }
              });
              break;
            case '0':
              that.$router.push({
                name: 'paySuccess',
                params: {
                  res: res
                }
              });
              break;
          }
          Indicator.close();
        }).fail(function (res) {
          console.log('error');
          Indicator.close();
        });
      },
      seeOrder(){
        var orderId = this.orderId.substring(0, 15);
        var tab = orderId.substring(orderId.length - 2);
        this.$store.state.headNav.back = 'orderIndex';
        switch (tab) {
          case '10'://机票订单
            this.$router.push({
              name: 'waitPayOrder'
            });
            break;
          case '11'://酒店订单
            this.$router.push({
              name: 'hotelOrderDetail'
            });
            break;
          case '12'://火车票订单
            this.$router.push({
              name: 'trainOrderDetail'
            });
            break;
          case '13'://保险订单
            break;
          case '14'://通用订单
            break;
        }
      },
      confirmBtnL(){
        switch (this.confirmInfoL) {
          case '取消':
            this.confirmShow = false;
            break;
          case '重新输入':
            this.confirmShow = false;
            this.passwordPopShow = true;
            setTimeout(function () {
              // 获取焦点
              var pwdInput = document.querySelector('.password');
              pwdInput.focus();
            }, 1000)
            break;
        }
      },
      confirmBtnR(){
        switch (this.confirmInfoR) {
          case '取消':
            this.confirmShow = false;
            break;
        }
      },
      pwdChange(e){
        var value = e.target.value;
        if (value.length >= 6) {
          this.payBtnActive = 'payBtnActive'
        } else {
          this.payBtnActive = ''
        }
      },
      passwordPopClick(){
        this.passwordPopShow = false;
      },
      weiXinClick(){
        this.weiXinChecked = !this.weiXinChecked;
        this.zhiFuBaoChecked = false;

        if (this.personalBalance >= this.totalAmount) {//余额大于总价
          this.balanceSwitch = false; //关闭余额
        }


        if (this.bpTotalAmount >= this.totalAmount) {//公司大于总价
          this.companySwitch = false;
        }


        if (this.balanceSwitch == true && this.companySwitch == true) {
          if ((this.personalBalance + this.bpTotalAmount) >= this.totalAmount) {
            this.balanceSwitch = false; //关闭余额
          }
        }


      },
      zhiFuBaoClick(){
        this.zhiFuBaoChecked = !this.zhiFuBaoChecked;
        this.weiXinChecked = false;

        if (this.personalBalance >= this.totalAmount) {//余额大于总价
          this.balanceSwitch = false; //关闭余额
        }

        if (this.bpTotalAmount >= this.totalAmount) {//公司大于总价
          this.companySwitch = false;
        }


        if (this.balanceSwitch == true && this.companySwitch == true) {
          if ((this.personalBalance + this.bpTotalAmount) >= this.totalAmount) {
            this.balanceSwitch = false; //关闭余额
          }
        }

      },
      companyToggle(){


        if (this.canCompanyPay == false) {//不能使用公司支付
          this.alertNotComPayShow = true;
          return
        } else if (this.companyBalanceEnough == false) { //公司余额不足
          alert('账户余额不足,请联系贵司管理员');
          return
        }


        this.companySwitch = !this.companySwitch;
        if (this.bpTotalAmount >= this.totalAmount) {//如果公司余额大于总价
          this.balanceSwitch = false;//我的余额关闭
          this.weiXinChecked = false;//微信关闭关闭
          this.zhiFuBaoChecked = false;//支付宝关闭
        } else {

        }
      },
      balanceToggle(){
        if (this.personalBalance == 0) {
          alert('余额为0');
        } else {

          this.balanceSwitch = !this.balanceSwitch;

          if (this.personalBalance >= this.totalAmount) {//余额大于总价
            this.weiXinChecked = false;//微信关闭关闭
            this.zhiFuBaoChecked = false;//支付宝关闭
          }


          if (this.bpTotalAmount >= this.totalAmount) { //公司大于总价
            this.companySwitch = false;
          }

          if (this.balanceSwitch == true && this.companySwitch == true) {
            if ((this.personalBalance + this.bpTotalAmount) >= this.totalAmount) {
              this.weiXinChecked = false;//微信关闭关闭
              this.zhiFuBaoChecked = false;//支付宝关闭
            }

          }
        }


      },
      headBack(){
        this.$router.go(-1);
      },
      toast(k) {
        var that = this;
        that.toastShow = true;
        that.toastInfo = k;
        setTimeout(function () {
          that.toastShow = false;
          // 获取焦点
          var pwdInput = document.querySelector('.password');
          pwdInput.focus();
        }, 1000)
      },
      jj(){
        Indicator.open({
          text: '加载中...',
          spinnerType: 'fading-circle'
        });
        var that = this;
        var serverUrl = $tool.getServerUrl();
        app.ajax({
          type: 'get',
          url: serverUrl + '/pay/status.json',
          data: {},
          dataType: 'jsonp',
          jsonp: 'callback',
        }).done(function (res) {

          Indicator.close();
        }).fail(function (res) {
          console.log('error');
          Indicator.close();
        });
      }//ajax请求模板
    },
    computed: {
      thirdPartyMoney(){
        var thirdPartyMoney = this.totalAmount;
        if (this.companySwitch && this.balanceSwitch && this.canShowCompanPay) {
          if (this.personalBalance + this.bpTotalAmount >= this.totalAmount) {
            thirdPartyMoney = 0;
          } else {
            thirdPartyMoney = this.totalAmount - this.personalBalance - this.bpTotalAmount;
          }
        }
        else if (this.companySwitch && this.balanceSwitch == false && this.canShowCompanPay) {
          if (this.bpTotalAmount >= this.totalAmount) {
            thirdPartyMoney = 0;
          } else {
            thirdPartyMoney = this.totalAmount - this.bpTotalAmount;
          }
        }
        else if (this.balanceSwitch && this.companySwitch == false) {
          if (this.personalBalance >= this.totalAmount) {
            thirdPartyMoney = 0;
          } else {
            thirdPartyMoney = this.totalAmount - this.personalBalance;
          }
        }
        else {
          thirdPartyMoney = this.totalAmount;
        }
        return parseFloat(thirdPartyMoney)
      },
      orderId(){
        return this.$store.state.orderId;
      },
    },
    watch: {
      thirdPartyMoney(val, oldVal){
        if (val > 0 && this.weiXinChecked == false && this.zhiFuBaoChecked == false) {
          this.canPay = false
        } else {
          this.canPay = true
        }
      },
      weiXinChecked(val, oldVal){
        if (val == true) {
          this.canPay = true
        } else if (this.thirdPartyMoney > 0 && this.weiXinChecked == false && this.zhiFuBaoChecked == false) {
          this.canPay = false
        }
      },
      zhiFuBaoChecked(val, oldVal){
        if (val == true) {
          this.canPay = true
        } else if (this.thirdPartyMoney > 0 && this.weiXinChecked == false && this.zhiFuBaoChecked == false) {
          this.canPay = false
        }
      },
    }

  }
</script>
